<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/admin.css" />
</head>

<body>
<div id="content-user" class="page-content-wrap">
    <div id="layer_add" class="layui-card" style="display: none">
    <form class="layui-form layui-card-body" lay-filter="filter_form_add">
        <div class="layui-form-item layui-hide">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name"  lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" placeholder="年龄" lay-verify="number" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input type="text" name="birth" placeholder="请输入" autocomplete="off" class="layui-input layui-date">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <input type="text" name="tel"  placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <textarea name="addr" placeholder="地址" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-input-block layui-hide">
            <button class="layui-btn" lay-submit lay-filter="form_submit">立即提交</button>
            <!--<button id="btn_form_add_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>-->
        </div>
    </form>
    </div>
    <div class="layui-form">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="search"><i class="layui-icon layui-icon-search"></i>搜索</button>
            </div>
        </form>
        <table id="table_user" lay-filter="filter_table_user" class="layui-table" lay-skin="line"></table>
        <script type="text/html" id="toolbar">
            <a class="layui-btn layui-btn-normal  layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</a>
        </script>
        <script type="text/html" id="optbar">
            <a class="layui-icon layui-icon-edit" lay-event="edit"></a>
            <a class="layui-icon layui-icon-delete" lay-event="del"></a>
        </script>
    </div>
</div>
<script src="../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/index.js" data-main="main" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['layer','table','form','main'], function() {
        var layer = layui.layer ,table =layui.table ,form = layui.form ,$=layui.$,main = layui.main;

        //列表加载数据
        table.render({
            elem:'#table_user',
            toolbar:'#toolbar',
            cols:[[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', title:'ID', width:100,hide:true},
                {field:'name', title:'姓名', width:200},
                {field:'age', title:'年龄', width:100},
                {field:'sex', title:'性别', width:100},
                {field:'birth', title:'生日', width:150},
                {field:'tel', title:'电话', width:150},
                {field:'addr', title:'地址', width:200},
                {toolbar:'#optbar', title:'操作'}
            ]],
            url:'../data/user.json',
            page:true,
            limit:8,
            limits:8,
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.page.code, //解析接口状态
                    "msg": res.page.msg, //解析提示文本
                    "count": res.page.count, //解析数据长度
                    "data": res.page.data //解析数据列表
                };
            }
        });
        //工具栏
        table.on('toolbar(filter_table_user)', function(obj){
            switch(obj.event){
                case 'add':
                    // layer.msg('添加');
                    openForm();
                    // main.addTab('user-add.html');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });
        table.on('row(test)', function(obj){
            //obj.tr、obj.data
            //obj.del(); obj.update(fields)
        });
        table.on('rowDouble(test)', function(obj){
            //obj 同上
        });
        //操作栏
        table.on('tool(test)', function(obj){
            //obj.data、obj.event、obj.tr
            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

        //按钮事件
        var active = {
            tableAdd:function(){

            },
            tableRemove:function(){

            }
        };
        //data-method进行按钮绑定
        $('#content-user .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        //form
        form.on('submit(form_submit)',function (data) {
            alert(1)
        });
        function openForm(callback){
            layer.open({
                type: 1,
                area: ['600px','500px'],
                shade: 0.5,
                fixed:true,
                skin:'custom-layer-class',
                offset: 'auto',
                title:'新增用户',
                content:$('#layer_add'),
                // content:'http://localhost:63342/layui-admin-v2/src/views/user-add.html',
                btn:['提交','重置','取消'],
                yes :function(index, layero){
                    layero.find('form').find('button').trigger('click');
                    layero.find('form').data('layer-index',index);
                },
                btn2:function (index, layero) {
                    layero.find('form')[0].reset()
                    return false;
                },
                btn3:function (index, layero) {
                    layer.close(index);
                },
                success : function(layero, index){
                    //form.render(null, 'test1'); // 重置
                    layero.find('form')[0].reset();
                }
            });
        }
    });
</script>
</body>

</html>